<template>
    <div class="design-item">
        <div class="design-item-controller">
            <div class="design-item-controller-handle design-component-rich-preview" v-html="displayContent" :style="{backgroundColor:bgColor , padding: (enableFull == 1 ? 0 :10 ) + 'px'}">
            </div>
            <slot name="menu"></slot>
        </div>
        
        
        
        
        <div class="design-item-editor" v-show="show && !showAddMenuGroup">
            <div>
                <div class="rich-text-editor-title">富文本</div>
                <div class="rich-text-editor-group" style="margin-bottom: 15px;">
                	
                	
                    <div class="rich-text-editor-group-block"> 背景颜色： </div>
                    <div class="rich-text-editor-group-block">
                    </div>
                    
                    
                    <div class="rich-text-editor-group-block">是否全屏： </div>
                    <div class="rich-text-editor-group-block">

                    </div>
                    
                    
                </div>
                
                <div class="rich-text-editor-group" style="height:657px;">
                   <vue-ueditor-wrap v-model="msg" :config="myConfig"></vue-ueditor-wrap>
                </div>
            </div>
        </div>
        
        
        <slot name="addMenuGroup" v-if="showAddMenuGroup"></slot>
    </div>
</template>
<script>
    var defaultOptions = {
        bgColor: "#FFFFFF",
        editorOpts: {
            toolbar: [
                "source | undo redo | bold italic underline strikethrough | forecolor backcolor | removeformat |",
                "selectall cleardoc",
                "| justifyleft justifycenter justifyright justifyjustify |",
                "album"
            ],
            focus: true ,
            imageScaleEnabled:false
        },
        emptyEditorText: '<p>点此编辑『富文本』内容 ——&gt;</p><p>你可以对文字进行<strong>加粗</strong>、<em>斜体</em>、<span style="text-decoration: underline;">下划线</span>、<span style="text-decoration: line-through;">删除线</span>、文字<span style="color: rgb(0, 176, 240);">颜色</span>、<span style="background-color: rgb(255, 192, 0); color: rgb(255, 255, 255);">背景色</span>等简单排版操作,也可在这里插入图片。</p></span></p>'
    };
    export default {
        name: "nc-design-item-rich",
        otherInfo: {
            title: "富文本" ,
            type:'richText' ,
            group : 0 ,
            max : 0
        },
        //外部传入参数
        props: {
            show: {
                type: Boolean,
                default: false
            },
            options: {
                type: Object,
                default: null
            },
            cid: {
                type: Number
            },
            showAddMenuGroup: {
                type: Boolean,
                default: false
            }
        },
        /*
         * 自身数据,一定要一个function
         */
        data() {
            return{
                // 是否全屏
                enableFull: 0,
                // 背景颜色
                bgColor: "#FFFFFF",
                //编辑器中的内容
                content: "",
                type : 'richText',
                msg: '<h2><img src="http://img.baidu.com/hi/jx2/j_0003.gif"/>Vue + UEditor + v-model双向绑定</h2>',
			    myConfig: {
			      // 编辑器不自动被内容撑高
			      autoHeightEnabled: false,
			      // 初始容器高度
			      initialFrameHeight: 240,
			      // 初始容器宽度
			      initialFrameWidth: '100%',
			      // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
			      serverUrl: 'http://35.201.165.105:8000/controller.php',
			      // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2
			      UEDITOR_HOME_URL: '/UEditor/'
			    }
            }
        },
        computed: {
            ueditorId() {
                return `container_${this._uid}`;
            },
            // 展示用的内容
            displayContent() {
                return this.content ? this.content : defaultOptions.emptyEditorText;
            }
        },
        watch :{
        },
        created() {
        },
        mounted() {
//          this.UE = window.UE.getEditor('editor')                 
//          ue.addListener("contentChange", function () {
//              self.content = ue.getContent();
//          })
//          ue.addListener("clearDoc" , function(){
//              self.content = ""
//          })                 
//          ue.ready(()=>{
//              ue.setContent(self.content)
//              ue.$body.on('input' , function () {
//                  setTimeout(function () {
//                      self.content = ue.getContent()
//                  },100)
//              })
//          })
        },
        methods: {
            //刷新数据
            refreshElement() {
            },
            // 获取当前数据
            getCurrentData(){
                return {
                    enableFull: this.enableFull,
                    // 背景颜色
                    bgColor: this.bgColor,
                    //编辑器中的内容
                    content:this.content ,
                    type :'richText'
                }
            }
        }
    };
</script>